<template>
    <div id="chat">
        <header class="mui-bar mui-bar-nav public-green-bgcolor header-no-shadow header-txt-color">
            <a class="mui-icon mui-icon-left-nav mui-pull-left go_back"></a>
            <a class="mui-icon mui-icon-person mui-pull-right"></a>
            <h1 class="mui-title" id="chat_who">burtyang</h1>
        </header>
        
        <div class="mui-content mui-scroll-wrapper" id="chat_content">
            <!--聊天窗口-->
            <div class="chat-box mui-scroll">
                <div class="public-chat-box public-chat-box-my">
                    <p class='chat-time'><span>10:00</span></p>
                    <div class="chat-txt chat-txt-right">
                        <img class='avatar' src="http://192.168.6.17:8082/images/touxiang2.jpg"/>
                        <div class="public-chat-content">
                            <div class="box-background">
                                <span class="mui-icon chaticonfont chat_icon-youbian"></span>
                                <span class='txt_click'>你好</span>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
                <div class="public-chat-box public-chat-box-my">
                    <p class='chat-time'><span>10:00</span></p>
                    <div class="chat-txt chat-txt-right">
                        <img class='avatar' src="http://192.168.6.17:8082/images/touxiang2.jpg"/>
                        <div class="public-chat-content">
                            <div class="box-background">
                                <span class="mui-icon chaticonfont chat_icon-youbian"></span>
                                <span class='txt_click'>八百标兵奔北坡，炮兵并排北边跑，
                                    炮兵怕把标兵碰，标兵怕碰炮兵炮
                                </span>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!--输入框-->
        <div class="chat-bottom-input mui-row">
            <div class="mui-col-xs-1 grid camera" id="catch_photo"> 
                <span class="mui-icon mui-icon-camera"></span>
            </div>
            <div class="mui-col-xs-9 grid">
                <form class="mui-input-group" action="javascript:;">
                    <!--只需要在input控件上添加.mui-input-speech类即可语音输入(语音转文字)-->
                    <div class="mui-input-row">
                        <input id="input_text" type="text" class="mui-input-clear mui-input-speech" placeholder="语音输入">
                    </div>
                </form>
            </div>
            <div class="mui-col-xs-2 grid message">
                <span class="mui-icon mui-icon mui-icon-mic-filled speech active"></span>
                <button class="public-g-g-btn">发送</button>
            </div>
        </div>
        
        
        <!--说话时的框-->
        <div class="sound-box"></div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>


